<template>
    <view class="container">
        <!-- <header-bar :config='config'  @rightClick="rightClick"></header-bar> -->
        <scroll-view scroll-y>
            <view class="select-level" v-if="datas.length > 0">
                <uni-swipe-action v-for="(item, index) in datas" :key="index">
                    <uni-swipe-action-item v-if="item.SupplierId > 0">
                        <view class="select-level-item">
                            <text class="select-level-item-name">{{ item.Name }}</text>
                            <view class="select-level-item-percent">
                                <iconsfont
                                    @click="edit(item)"
                                    style="margin-right: 48rpx"
                                    customIcons="icon-xiugai"
                                    :color="'#333'"
                                    size="32"></iconsfont>
                            </view>
                        </view>
                        <template v-slot:right>
                            <view class="del" @click="onClick(item)"><text>删除</text></view>
                        </template>
                    </uni-swipe-action-item>
                </uni-swipe-action>
            </view>
            <mescroll-empty v-else :option="emptyOption"></mescroll-empty>
        </scroll-view>
        <uni-popup ref="addTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>添加</text>
                </view>
                <input type="text" class="addinput" v-model="addname" placeholder="请输入产品线名称" />
                <view class="pop-action">
                    <view @click="addClose">取消</view>
                    <view @click="addConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="editTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>修改</text>
                </view>
                <view style="padding: 0rpx 0 48rpx 0">
                    <view class="flex-start"
                        ><view>原产品线名称：</view><view>{{ edititem.Name }}</view></view
                    >
                    <view class="flex-start" style="margin-top: 26rpx"
                        ><view>新产品线名称：</view
                        ><input type="text" class="editinput" v-model="name" placeholder="请输入产品线名称"
                    /></view>
                </view>
                <view class="pop-action">
                    <view @click="editClose">取消</view>
                    <view @click="editConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="delTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>提示</text>
                </view>
                <view style="text-align: center; padding: 12rpx 0 48rpx 0">确定删除选中项？</view>
                <view class="pop-action">
                    <view @click="delClose">取消</view>
                    <view @click="delConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { GetProductLineList, SaveProductLine, DeleteProductLines } from "@/pages_supplier/service/api/product.js"
export default {
    components: {},
    data() {
        return {
            name: "",
            addname: "",
            config: {
                title: "选择产品线",
                centerSlot: true,
                rightSlot: true,
                rightBtns: [
                    {
                        btnType: 1,
                        type: "编辑",
                    },
                ],
            },
            datas: [],
            id: "",
            edititem: {},
            delitem: {},
        }
    },
    onLoad(e) {
        this.id = e.id
        //选中的排第一位
        // this.datas = JSON.parse(e.data);
        // let move =  [...datas];
        // let add = [];
        // move.forEach((e,index)=>{
        // 	if(e.ID==this.id){
        // 		add = move.splice(index,1);
        // 	}
        // })
        // move.unshift(add[0]);
        // this.datas = move
    },
    mounted() {
        this.getData()
    },
    onShow() {},
    methods: {
        getData() {
            GetProductLineList().then((res) => {
                if (res.State == 1) {
                    this.datas = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        selectFn(data) {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit("getSelectData", {
                ...data,
            })
            this.easyGoBack()
        },
        rightClick() {
            this.easyTo("/pages_supplier/packet/addProduct/productEdit")
        },
        onClick(item) {
            this.delitem = item
            this.$refs.delTip.open()
        },
        add() {
            this.$refs.addTip.open()
        },
        addClose() {
            this.$refs.addTip.close()
        },
        addConfirm() {
            if (this.addname == "") {
                this.easyToast("请输入产品线名称")
                return
            }
            let param = {
                name: this.addname,
            }
            SaveProductLine(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("添加成功")
                    this.addClose()
                    setTimeout((e) => {
                        this.getData()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        edit(item) {
            this.edititem = item
            this.$refs.editTip.open()
        },
        editClose() {
            this.$refs.editTip.close()
        },
        editConfirm() {
            if (this.name == "") {
                this.easyToast("请输入新产品线名称")
                return
            }
            this.edititem.Name = this.name
            SaveProductLine(this.edititem).then((res) => {
                if (res.State == 1) {
                    this.easyToast("修改成功")
                    this.editClose()
                    setTimeout((e) => {
                        this.getData()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        delClose() {
            this.$refs.delTip.close()
        },
        delConfirm() {
            let path = "?ids=" + this.delitem.ID
            DeleteProductLines(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    this.delClose()
                    setTimeout((e) => {
                        this.getData()
                    }, 1000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
    //导航栏按钮事件
    onNavigationBarButtonTap(e) {
        let index = e.index
        if (index == 0) {
            //历史记录
            this.$refs.addTip.open()
        }
    },
}
</script>

<style lang="scss">
.select-level {
    margin-top: $app-page-padding;
    background: #ffffff;
    // padding:0 $app-page-padding*2;
}
.select-level-item {
    background: $color-white;
    border-bottom: solid 2rpx #ebebeb;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 98rpx;
    &:last-child {
        border: none;
    }
    .select-level-item-name {
        flex: 1;
        font-size: 32rpx;
        padding-left: $app-page-padding * 2;
    }
}
.del {
    width: 112rpx;
    height: 98rpx;
    line-height: 98rpx;
    text-align: center;
    background: #ef1f1f;
    text {
        color: #ffffff;
        font-size: 28rpx;
    }
}
.addinput {
    height: 116rpx;
    width: 100%;
    background: #f7f7f7;
    border-radius: 8rpx;
    text-indent: 20rpx;
    margin-bottom: 48rpx;
}
.editinput {
    flex: 1;
    height: 80rpx;
    background: #f7f7f7;
    border-radius: 8rpx;
}
</style>
